<template>
	<view class="container">
		<!-- 背景装饰 -->
		<view class="bg-decoration">
			<view class="golden-line line-1"></view>
			<view class="golden-line line-2"></view>
			<view class="golden-circle circle-1"></view>
			<view class="golden-circle circle-2"></view>
			<view class="golden-circle circle-3"></view>
		</view>

		<!-- 加载状态 -->
		<view class="loading-overlay" v-if="isLoading">
			<view class="loading-content">
				<view class="loading-spinner"></view>
				<text class="loading-text">加载中...</text>
			</view>
		</view>

		<!-- 顶部用户信息卡片 -->
		<view class="user-card">
			<view class="card-bg"></view>
			<view class="user-header">
				<view class="avatar-section">
					<view class="avatar-ring">
						<image class="avatar" :src="userInfo.avatarUrl || '/static/logo.png'" mode="aspectFill"></image>
					</view>
					<view class="status-indicator"></view>
				</view>
				<view class="user-info">
					<text class="username">{{ userInfo.name || userInfo.studentName || '未设置姓名' }}</text>
					<view class="role-badge">
						<text class="role-text">学生</text>
					</view>
					<text class="user-phone">{{ userInfo.phone || userInfo.parentPhone || '未设置手机号' }}</text>
				</view>
				<view class="edit-btn" @click="editProfile">
					<image class="edit-icon" src="/static/编辑.png" mode="aspectFit"></image>
				</view>
			</view>
			
			<!-- 激励语句 -->
			<view class="motivation-section">
				<text class="motivation-english">{{ getRandomMotivation().english }}</text>
				<text class="motivation-chinese">{{ getRandomMotivation().chinese }}</text>
			</view>
			
			<!-- 统计数据 -->
			<view class="stats-section">
				<view class="stats-grid">
					<view class="stat-item">
						<!-- <view class="stat-icon">⏰</view> -->
						<text class="stat-number">{{ userInfo.remainingHours || 0 }}</text>
						<text class="stat-label">剩余课时</text>
					</view>
					<view class="stat-divider"></view>
					<view class="stat-item">
						<!-- <view class="stat-icon">📅</view> -->
						<text class="stat-number">{{ userInfo.totalBookings || 0 }}</text>
						<text class="stat-label">预约次数</text>
					</view>
					<view class="stat-divider"></view>
					<view class="stat-item">
						<!-- <view class="stat-icon">💰</view> -->
						<text class="stat-number">{{ userInfo.totalRecharge || 0 }}</text>
						<text class="stat-label">充值次数</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 功能菜单 -->
		<view class="menu-section">
			<!-- 学生端菜单 -->
			<view class="menu-group">
				<view class="group-title">
					<text class="title-text">学习管理</text>
					<text class="title-line"></text>
				</view>
				<view class="menu-item" @click="navigateTo('/pages/recharge/recharge')">
					<view class="menu-icon">
						<image class="icon-img" src="/static/金钱图标.png" mode="aspectFit"></image>
					</view>
					<view class="menu-content">
						<text class="menu-text">课时充值</text>
						<text class="menu-desc">购买更多课时</text>
					</view>
					<text class="menu-arrow">›</text>
				</view>
				<view class="menu-item" @click="navigateTo('/pages/booking/booking')">
					<view class="menu-icon">
						<image class="icon-img" src="/static/预约次数.png" mode="aspectFit"></image>
					</view>
					<view class="menu-content">
						<text class="menu-text">我的预约</text>
						<text class="menu-desc">管理小课预约</text>
					</view>
					<text class="menu-arrow">›</text>
				</view>
			</view>

			<!-- 通用菜单 -->
			<view class="menu-group">
				<view class="group-title">
					<text class="title-text">其他服务</text>
					<text class="title-line"></text>
				</view>
				<view class="menu-item" @click="navigateTo('/pages/help/help')">
					<view class="menu-icon">
						<image class="icon-img" src="/static/客服.png" mode="aspectFit"></image>
					</view>
					<view class="menu-content">
						<text class="menu-text">帮助与支持</text>
						<text class="menu-desc">客服咨询 · 关于我们 · 常见问题</text>
					</view>
					<text class="menu-arrow">›</text>
				</view>
				<view class="menu-item" @click="showSettings">
					<view class="menu-icon">
						<image class="icon-img" src="/static/设置.png" mode="aspectFit"></image>
					</view>
					<view class="menu-content">
						<text class="menu-text">设置</text>
						<text class="menu-desc">应用设置与偏好</text>
					</view>
					<text class="menu-arrow">›</text>
				</view>
			</view>
		</view>

		<!-- 退出登录 -->
		<view class="logout-section">
			<button class="logout-btn" @click="handleLogout">
				<image class="logout-icon" src="/static/退出.png" mode="aspectFit"></image>
				<text class="logout-text">退出登录</text>
			</button>
		</view>

		<!-- 编辑资料弹窗 -->
		<view class="edit-modal" v-if="showEditModal">
			<view class="modal-overlay" @click="closeEditModal"></view>
			<view class="modal-content">
				<view class="modal-header">
					<text class="modal-title">编辑资料</text>
					<text class="modal-close" @click="closeEditModal">×</text>
				</view>
				
				<view class="edit-form">
					<view class="form-item">
						<text class="form-label">学生姓名</text>
						<input class="form-input" v-model="editForm.name" placeholder="请输入学生姓名" />
					</view>
					<view class="form-item">
						<text class="form-label">家长手机号</text>
						<input class="form-input" v-model="editForm.phone" placeholder="请输入家长手机号" type="number" maxlength="11" />
					</view>
				</view>
				
				<view class="modal-actions">
					<button class="cancel-btn" @click="closeEditModal">取消</button>
					<button class="confirm-btn" @click="saveProfile">保存</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { API_CONFIG, getApiUrl, getRequestConfig, apiRequest } from '@/config/api.js'
	
	export default {
		data() {
			return {
				showEditModal: false,
				isLoading: false,
				userInfo: {
					id: null,
					name: '',
					studentName: '',
					phone: '',
					parentPhone: '',
					role: 0,
					remainingHours: 0,
					totalBookings: 0,
					totalRecharge: 0,
					avatarUrl: ''
				},
				editForm: {
					name: '',
					phone: ''
				}
			}
		},
		onLoad() {
			this.loadUserInfo()
		},
		onShow() {
			// 每次显示页面时刷新用户信息
			this.loadUserInfo()
		},
		methods: {
			async loadUserInfo() {
				try {
					this.isLoading = true
					
					// 从本地存储获取用户信息
					const userInfo = uni.getStorageSync('userInfo')
					console.log('从本地存储获取的用户信息:', userInfo)
					
					if (userInfo) {
						this.userInfo = { ...this.userInfo, ...userInfo }
						console.log('合并后的用户信息:', this.userInfo)
					}
					
					// 如果有token，尝试从服务器获取最新信息
					const token = uni.getStorageSync('token')
					if (token) {
						await this.fetchUserInfo()
						await this.fetchUserStats()
					}
				} catch (error) {
					console.error('加载用户信息失败:', error)
					uni.showToast({
						title: '加载用户信息失败',
						icon: 'none'
					})
				} finally {
					this.isLoading = false
				}
			},
			
			async fetchUserInfo() {
				try {
					const token = uni.getStorageSync('token')
					if (!token) return
					
					const apiUrl = getApiUrl('/api/user/info')
					const requestConfig = getRequestConfig(token)
					
					const response = await uni.request({
						url: apiUrl,
						method: 'GET',
						header: requestConfig.header
					})
					
					if (response.data.success) {
						const serverUserInfo = response.data.data
						this.userInfo = { ...this.userInfo, ...serverUserInfo }
						// 更新本地存储
						uni.setStorageSync('userInfo', this.userInfo)
					}
				} catch (error) {
					console.error('获取用户信息失败:', error)
				}
			},
			
			async fetchUserStats() {
				try {
					const token = uni.getStorageSync('token')
					const localUserInfo = uni.getStorageSync('userInfo') || {}
					const studentId = localUserInfo?.id
					
					if (!token || !studentId) return
					
					console.log('获取用户统计信息，学生ID:', studentId);
					
					// 1. 获取学生课时信息
					try {
						const lessonResponse = await apiRequest({
							url: getApiUrl(API_CONFIG.ENDPOINTS.STUDENT_LESSON_INFO) + '?studentId=' + studentId,
							method: 'GET',
							header: {
								'Content-Type': 'application/json',
								'Authorization': `Bearer ${token}`
							}
						})
						
						if (lessonResponse.code === 200) {
							const lessonData = lessonResponse.data
							this.userInfo.remainingHours = lessonData.remainingHours || 0
							console.log('剩余课时:', this.userInfo.remainingHours);
						}
					} catch (error) {
						console.error('获取课时信息失败:', error);
					}
					
					// 2. 获取预约次数
					try {
						const bookingResponse = await apiRequest({
							url: getApiUrl(API_CONFIG.ENDPOINTS.APPOINTMENT) + '?studentId=' + studentId,
							method: 'GET',
							header: {
								'Content-Type': 'application/json',
								'Authorization': `Bearer ${token}`
							}
						})
						
						if (bookingResponse && (bookingResponse.code === 200 || bookingResponse.code === 0) && Array.isArray(bookingResponse.data)) {
							this.userInfo.totalBookings = bookingResponse.data.length
							console.log('预约次数:', this.userInfo.totalBookings);
						} else {
							this.userInfo.totalBookings = 0
						}
					} catch (error) {
						console.error('获取预约次数失败:', error);
						this.userInfo.totalBookings = 0
					}
					
					// 3. 获取充值次数
					try {
						const rechargeResponse = await apiRequest({
							url: getApiUrl(API_CONFIG.ENDPOINTS.STUDENT_MY_RECHARGE_RECORDS),
							method: 'GET',
							header: {
								'Content-Type': 'application/json',
								'Authorization': `Bearer ${token}`
							}
						})
						
						if (rechargeResponse && (rechargeResponse.code === 200 || rechargeResponse.code === 0) && Array.isArray(rechargeResponse.data)) {
							this.userInfo.totalRecharge = rechargeResponse.data.length
							console.log('充值次数:', this.userInfo.totalRecharge);
						} else {
							this.userInfo.totalRecharge = 0
						}
					} catch (error) {
						console.error('获取充值次数失败:', error);
						this.userInfo.totalRecharge = 0
					}
					
					// 更新本地存储
					uni.setStorageSync('userInfo', this.userInfo)
					
				} catch (error) {
					console.error('获取用户统计信息失败:', error)
				}
			},
			
			navigateTo(url) {
				// 检查是否是tabbar页面
				const tabbarPages = [
					'/pages/index/index',
					'/pages/course/course', 
					'/pages/booking/booking',
					'/pages/profile/profile'
				]
				
				if (tabbarPages.includes(url)) {
					uni.switchTab({
						url: url
					})
				} else {
					uni.navigateTo({
						url: url
					})
				}
			},
			
			editProfile() {
				this.editForm = {
					name: this.userInfo.name || this.userInfo.studentName || '',
					phone: this.userInfo.phone || this.userInfo.parentPhone || ''
				}
				
				this.showEditModal = true
			},
			
			closeEditModal() {
				this.showEditModal = false
			},
			
			async saveProfile() {
				if (!this.editForm.name.trim()) {
					uni.showToast({
						title: '请输入学生姓名',
						icon: 'none'
					})
					return
				}
				
				// 验证手机号
				if (!this.editForm.phone.trim()) {
					uni.showToast({
						title: '请输入家长手机号',
						icon: 'none'
					})
					return
				}
				
				if (!/^1[3-9]\d{9}$/.test(this.editForm.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
					return
				}
				
				uni.showLoading({
					title: '保存中...'
				})
				
				try {
					const token = uni.getStorageSync('token')
					if (!token) {
						throw new Error('未登录')
					}
					
					// 构建更新数据，与后端User实体类字段匹配
					const updateData = {
						id: this.userInfo.id,
						name: this.editForm.name,
						phone: this.editForm.phone,
						role: 0 // 学生角色
					}
					
					const apiUrl = getApiUrl('/api/user/update')
					const requestConfig = getRequestConfig(token, 'PUT', updateData)
					
					const response = await uni.request({
						url: apiUrl,
						method: 'PUT',
						header: requestConfig.header,
						data: updateData
					})
					
					uni.hideLoading()
					
					if (response.data.success) {
						// 更新本地用户信息
						this.userInfo.name = this.editForm.name
						this.userInfo.phone = this.editForm.phone
						this.userInfo.parentPhone = this.editForm.phone // 保持兼容性
						
						// 保存到本地存储
						uni.setStorageSync('userInfo', this.userInfo)
						
						uni.showToast({
							title: '保存成功',
							icon: 'success'
						})
						
						this.closeEditModal()
					} else {
						uni.showToast({
							title: response.data.message || '保存失败',
							icon: 'none'
						})
					}
				} catch (error) {
					uni.hideLoading()
					console.error('保存用户信息失败:', error)
					uni.showToast({
						title: '保存失败，请重试',
						icon: 'none'
					})
				}
			},
			
			showSettings() {
				uni.showActionSheet({
					itemList: ['清除缓存', '检查更新', '意见反馈'],
					success: (res) => {
						switch (res.tapIndex) {
							case 0:
								this.clearCache()
								break
							case 1:
								this.checkUpdate()
								break
							case 2:
								this.feedback()
								break
						}
					}
				})
			},
			
			clearCache() {
				uni.showModal({
					title: '清除缓存',
					content: '确定要清除缓存吗？',
					success: (res) => {
						if (res.confirm) {
							// 清除本地缓存
							uni.clearStorageSync()
							uni.showToast({
								title: '清除成功',
								icon: 'success'
							})
							
							// 重新跳转到登录页
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/login/login'
								})
							}, 1500)
						}
					}
				})
			},
			
			checkUpdate() {
				uni.showToast({
					title: '已是最新版本',
					icon: 'success'
				})
			},
			
			feedback() {
				uni.navigateTo({
					url: '/pages/service/feedback'
				})
			},
			
			handleLogout() {
				uni.showModal({
					title: '退出登录',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							// 清除本地存储
							uni.removeStorageSync('token')
							uni.removeStorageSync('userInfo')
							
							uni.showToast({
								title: '已退出登录',
								icon: 'success'
							})
							
							// 跳转到登录页
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/login/login'
								})
							}, 1500)
						}
					}
				})
			},
			
			getRandomMotivation() {
				const motivations = [
					{
						english: "Success is not final, failure is not fatal.",
						chinese: "成功不是终点，失败也不是终结。"
					},
					{
						english: "The only way to do great work is to love what you do.",
						chinese: "做出伟大工作的唯一方法就是热爱你所做的事情。"
					},
					{
						english: "Learning is a treasure that will follow its owner everywhere.",
						chinese: "学习是一笔财富，会跟随主人到任何地方。"
					},
					{
						english: "Every expert was once a beginner.",
						chinese: "每个专家都曾经是初学者。"
					},
					{
						english: "Knowledge is power, but enthusiasm pulls the switch.",
						chinese: "知识就是力量，但热情才是开关。"
					},
					{
						english: "The future belongs to those who believe in the beauty of their dreams.",
						chinese: "未来属于那些相信梦想之美的人。"
					},
					{
						english: "Education is the most powerful weapon which you can use to change the world.",
						chinese: "教育是改变世界最强大的武器。"
					},
					{
						english: "Practice makes perfect, but nobody's perfect, so why practice?",
						chinese: "熟能生巧，但没有人是完美的，所以为什么要练习？"
					},
					{
						english: "The journey of a thousand miles begins with one step.",
						chinese: "千里之行，始于足下。"
					},
					{
						english: "Believe you can and you're halfway there.",
						chinese: "相信自己能行，你就已经成功了一半。"
					}
				];
				const index = Math.floor(Math.random() * motivations.length);
				return motivations[index];
			}
		}
	}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background: linear-gradient(135deg, #1A1F2E 0%, #2A2F3E 50%, #1E2332 100%);
	position: relative;
	overflow: hidden;
}

.bg-decoration {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	
	.golden-line {
		position: absolute;
		background: linear-gradient(to right, #00B8D4, #1976D2);
		opacity: 0.3;
		filter: blur(10px);
		
		&.line-1 {
			width: 100%;
			height: 2px;
			top: 20%;
			left: 0;
		}
		
		&.line-2 {
			width: 100%;
			height: 2px;
			bottom: 20%;
			left: 0;
		}
	}
	
	.golden-circle {
		position: absolute;
		border-radius: 50%;
		background: linear-gradient(135deg, rgba(0, 184, 212, 0.1), rgba(25, 118, 210, 0.1));
		border: 1px solid rgba(0, 184, 212, 0.2);
		
		&.circle-1 {
			width: 200rpx;
			height: 200rpx;
			top: 10%;
			right: -100rpx;
		}
		
		&.circle-2 {
			width: 150rpx;
			height: 150rpx;
			bottom: 30%;
			left: -75rpx;
		}
		
		&.circle-3 {
			width: 100rpx;
			height: 100rpx;
			top: 60%;
			right: 10%;
		}
	}
}

.loading-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	
	.loading-content {
		background: linear-gradient(135deg, #1A1F2E 0%, #2A2F3E 100%);
		padding: 60rpx;
		border-radius: 20rpx;
		text-align: center;
		border: 2rpx solid rgba(0, 184, 212, 0.3);
		
		.loading-spinner {
			width: 60rpx;
			height: 60rpx;
			border: 4rpx solid rgba(0, 184, 212, 0.3);
			border-top: 4rpx solid #00B8D4;
			border-radius: 50%;
			animation: spin 1s linear infinite;
			margin: 0 auto 20rpx;
		}
		
		.loading-text {
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.user-card {
	position: relative;
	margin: 40rpx 20rpx;
	padding: 40rpx;
	background: linear-gradient(135deg, #1A1F2E 0%, #2A2F3E 100%);
	border-radius: 24rpx;
	box-shadow: 0 12rpx 48rpx rgba(0, 0, 0, 0.4);
	border: 2rpx solid rgba(0, 184, 212, 0.3);
	overflow: hidden;
	z-index: 2;
	
	.card-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, rgba(0, 184, 212, 0.05), rgba(25, 118, 210, 0.05));
		z-index: -1;
	}
	
	.user-header {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
		
		.avatar-section {
			position: relative;
			margin-right: 30rpx;
			
			.avatar-ring {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				background: linear-gradient(135deg, #00B8D4, #1976D2);
				position: relative;
				padding: 2rpx;
				
				.avatar {
					width: 100%;
					height: 100%;
					border-radius: 50%;
					background: #1A1F2E;
				}
			}
			
			.status-indicator {
				position: absolute;
				bottom: 8rpx;
				right: 8rpx;
				width: 24rpx;
				height: 24rpx;
				border-radius: 50%;
				background: #4CAF50;
				border: 3rpx solid #1A1F2E;
				box-shadow: 0 0 10rpx rgba(76, 175, 80, 0.5);
			}
		}
		
		.user-info {
			flex: 1;
			
			.username {
				display: block;
				font-size: 40rpx;
				color: #FFFFFF;
				font-weight: bold;
				margin-bottom: 12rpx;
				text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
			}
			
			.role-badge {
				display: inline-block;
				background: linear-gradient(135deg, #00B8D4, #1976D2);
				border-radius: 20rpx;
				padding: 8rpx 20rpx;
				margin-bottom: 12rpx;
				
				.role-text {
					font-size: 24rpx;
					color: #FFFFFF;
					font-weight: 600;
				}
			}
			
			.user-phone {
				font-size: 26rpx;
				color: #AAB4BE;
			}
		}
		
		.edit-btn {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			background: linear-gradient(135deg, rgba(0, 184, 212, 0.1), rgba(25, 118, 210, 0.1));
			border: 2rpx solid rgba(0, 184, 212, 0.3);
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.3s ease;
			
			&:active {
				transform: scale(0.95);
				background: linear-gradient(135deg, rgba(0, 184, 212, 0.2), rgba(25, 118, 210, 0.2));
			}
			
			.edit-icon {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
	
	.motivation-section {
		text-align: center;
		padding: 20rpx 0;
		margin-bottom: 40rpx;
		
		.motivation-english {
			display: block;
			font-size: 28rpx;
			color: #DC143C;
			font-weight: 600;
			font-style: italic;
			text-shadow: 0 2rpx 4rpx rgba(220, 20, 60, 0.5);
			margin-bottom: 8rpx;
		}
		
		.motivation-chinese {
			display: block;
			font-size: 28rpx;
			color: #AAB4BE;
			text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
		}
	}
	
	.stats-section {
		.stats-grid {
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.stat-item {
				flex: 1;
				text-align: center;
				position: relative;
				
				.stat-icon {
					font-size: 32rpx;
					margin-bottom: 8rpx;
					opacity: 0.8;
				}
				
				.stat-number {
					display: block;
					font-size: 40rpx;
					color: #00B8D4;
					font-weight: bold;
					margin-bottom: 8rpx;
					text-shadow: 0 2rpx 4rpx rgba(0, 184, 212, 0.3);
				}
				
				.stat-label {
					font-size: 24rpx;
					color: #AAB4BE;
				}
			}
			
			.stat-divider {
				width: 2rpx;
				height: 60rpx;
				background: linear-gradient(to bottom, transparent, rgba(0, 184, 212, 0.3), transparent);
			}
		}
	}
}

.menu-section {
	margin: 20rpx;
	z-index: 2;
	position: relative;
}

.menu-group {
	background: linear-gradient(135deg, #1A1F2E 0%, #2A2F3E 100%);
	border-radius: 20rpx;
	margin-bottom: 30rpx;
	overflow: hidden;
	border: 2rpx solid rgba(0, 184, 212, 0.2);
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.3);
	
	.group-title {
		padding: 30rpx 30rpx 20rpx;
		position: relative;
		
		.title-text {
			font-size: 32rpx;
			color: #00B8D4;
			font-weight: bold;
			text-shadow: 0 0 10rpx rgba(0, 184, 212, 0.3);
		}
		
		.title-line {
			position: absolute;
			bottom: 0;
			left: 30rpx;
			right: 30rpx;
			height: 2rpx;
			background: linear-gradient(to right, #00B8D4, transparent);
		}
	}
	
	.menu-item {
		display: flex;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid rgba(0, 184, 212, 0.1);
		transition: all 0.3s ease;
		
		&:last-child {
			border-bottom: none;
		}
		
		&:active {
			background: rgba(0, 184, 212, 0.05);
		}
		
		.menu-icon {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			background: transparent;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 24rpx;
			
			&.admin-icon {
				background: linear-gradient(135deg, #ff9800, #f44336);
				box-shadow: 0 4rpx 16rpx rgba(255, 152, 0, 0.3);
			}
			
			.icon-text {
				font-size: 32rpx;
			}
			
			.icon-img {
				width: 55rpx;
				height: 55rpx;
			}
		}
		
		.menu-content {
			flex: 1;
			
			.menu-text {
				display: block;
				font-size: 32rpx;
				color: #FFFFFF;
				font-weight: 600;
				margin-bottom: 8rpx;
			}
			
			.menu-desc {
				font-size: 24rpx;
				color: #AAB4BE;
			}
		}
		
		.menu-arrow {
			font-size: 36rpx;
			color: #00B8D4;
			font-weight: bold;
		}
	}
}

.logout-section {
	margin: 40rpx 20rpx;
	z-index: 2;
	position: relative;
	
	.logout-btn {
		width: 100%;
		height: 100rpx;
		background: linear-gradient(135deg, rgba(244, 67, 54, 0.1), rgba(244, 67, 54, 0.05));
		border: 2rpx solid #f44336;
		border-radius: 50rpx;
		color: #f44336;
		font-size: 32rpx;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
		
		&:active {
			transform: scale(0.98);
			background: linear-gradient(135deg, rgba(244, 67, 54, 0.2), rgba(244, 67, 54, 0.1));
		}
		
		.logout-icon {
			margin-right: 12rpx;
			width: 40rpx;
			height: 40rpx;
		}
	}
}

.edit-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	
	.modal-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.8);
		backdrop-filter: blur(10rpx);
	}
	
	.modal-content {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: linear-gradient(135deg, #1A1F2E 0%, #2A2F3E 100%);
		border-radius: 24rpx;
		width: 85%;
		max-width: 650rpx;
		border: 2rpx solid rgba(0, 184, 212, 0.3);
		box-shadow: 0 20rpx 80rpx rgba(0, 0, 0, 0.5);
		overflow: hidden;
		
		.modal-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 40rpx;
			border-bottom: 2rpx solid rgba(0, 184, 212, 0.2);
			background: linear-gradient(135deg, rgba(0, 184, 212, 0.05), rgba(25, 118, 210, 0.05));
			
			.modal-title {
				font-size: 36rpx;
				color: #00B8D4;
				font-weight: bold;
				text-shadow: 0 0 10rpx rgba(0, 184, 212, 0.3);
			}
			
			.modal-close {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				background: rgba(0, 184, 212, 0.1);
				border: 1rpx solid rgba(0, 184, 212, 0.3);
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 40rpx;
				color: #AAB4BE;
				line-height: 1;
				transition: all 0.3s ease;
				
				&:active {
					background: rgba(0, 184, 212, 0.2);
					color: #00B8D4;
				}
			}
		}
		
		.edit-form {
			padding: 40rpx;
			
			.form-item {
				margin-bottom: 40rpx;
				
				&:last-child {
					margin-bottom: 0;
				}
				
				.form-label {
					display: block;
					font-size: 30rpx;
					color: #FFFFFF;
					margin-bottom: 20rpx;
					font-weight: 600;
				}
				
				.form-input {
					width: 100%;
					height: 90rpx;
					background: rgba(255, 255, 255, 0.05);
					border-radius: 16rpx;
					padding: 0 30rpx;
					font-size: 30rpx;
					color: #FFFFFF;
					border: 2rpx solid rgba(0, 184, 212, 0.3);
					box-sizing: border-box;
					transition: all 0.3s ease;
					
					&:focus {
						border-color: #00B8D4;
						background: rgba(0, 184, 212, 0.05);
						box-shadow: 0 0 20rpx rgba(0, 184, 212, 0.3);
					}
				}
			}
		}
		
		.modal-actions {
			display: flex;
			gap: 24rpx;
			padding: 40rpx;
			border-top: 2rpx solid rgba(0, 184, 212, 0.2);
			background: linear-gradient(135deg, rgba(0, 184, 212, 0.02), rgba(25, 118, 210, 0.02));
			
			.cancel-btn, .confirm-btn {
				flex: 1;
				height: 90rpx;
				border-radius: 45rpx;
				font-size: 30rpx;
				font-weight: 600;
				border: none;
				transition: all 0.3s ease;
			}
			
			.cancel-btn {
				background: rgba(255, 255, 255, 0.05);
				color: #AAB4BE;
				border: 2rpx solid rgba(0, 184, 212, 0.3);
				
				&:active {
					background: rgba(0, 184, 212, 0.1);
					color: #00B8D4;
				}
			}
			
			.confirm-btn {
				background: linear-gradient(135deg, #1976D2 0%, #2196F3 100%);
				color: #FFFFFF;
				box-shadow: 0 6rpx 24rpx rgba(25, 118, 210, 0.4);
				
				&:active {
					transform: scale(0.98);
					box-shadow: 0 3rpx 12rpx rgba(25, 118, 210, 0.6);
				}
			}
		}
	}
}
</style> 